/**
 * @flow
 */

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    TextInput,
    Image,
    Dimensions,
    TouchableOpacity,
    ScrollView,
} from 'react-native';
import TopViewListView from './TopViewListView';

const deviceWidth = Dimensions.get('window').width;
const topMenuJson = require('../../LocalData/TopMenu.json');

export default class TomView extends Component {
    constructor(props){
        super(props);
        this.state = {
            activePage:0
        };
    }
    
    render() {
        return (
            <View>
                <ScrollView
                    horizontal={true}
                    pagingEnabled={true}
                    showsHorizontalScrollIndicator={false}
                    onScroll={this.sss}>
                    {this.renderScrollItem()}
                </ScrollView>
                <View style={styles.indicatorView}>
                    {this.renderIndicator()}
                </View>
            </View>
        );
    }
    
    sss = (e) => {
        let i = e.nativeEvent.contentOffset.x/deviceWidth;
        if(Math.floor(i)==i){
            this.setState({activePage:i});
        }
    }
    
    renderScrollItem(){
        let json = {"data":[[{"title":"美食","image":"../image/collect"},{"title":"电影","image":"../image/collect"},{"title":"酒店","image":"../image/collect"},{"title":"休闲娱乐","image":"../image/collect"},{"title":"外卖","image":"../image/collect"},{"title":"自助餐","image":"../image/collect"},{"title":"KTV","image":"../image/collect"},{"title":"火车票机票","image":"../image/collect"},{"title":"丽人","image":"../image/collect"},{"title":"周边游","image":"../image/collect"}],[{"title":"足疗按摩","image":"../image/collect"},{"title":"购物","image":"../image/collect"},{"title":"今日新单","image":"../image/collect"},{"title":"小吃快餐","image":"../image/collect"},{"title":"生活服务","image":"../image/collect"},{"title":"甜点饮品","image":"../image/collect"},{"title":"美甲","image":"../image/collect"},{"title":"景点门票","image":"../image/collect"},{"title":"旅游","image":"../image/collect"},{"title":"全部分类","image":"../image/collect"}]]};
        let itemArray = [];
        let dataArray = json.data;
        for(let i=0;i<dataArray.length;i++){
            itemArray.push(
                <TopViewListView key={i} dataArr={dataArray[i]}/>
            );
        }
        // let colorArray = ['red','green','yellow'];
        // for(let i=0;i<colorArray.length;i++){
        //     itemArray.push(
        //         <View key={i} style={{backgroundColor:colorArray[i],width:deviceWidth,height:100}}>
        //             <Text style={{color:'white'}}>{i}</Text>
        //         </View>
        //     );
        // }
        return itemArray;
        
    }
    
    renderIndicator(){
        let indicatorArray = [];
        for(let i=0;i<2;i++){
            let activePageStyle = (i==this.state.activePage)?{color:'yellow'}:{color:'gray'};
            indicatorArray.push(
                <Text key={i} style={[{fontSize:30},activePageStyle]}>&bull;</Text>
            );
        }
        return indicatorArray;
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    indicatorView:{
        height:15,
        flexDirection:'row',
        justifyContent:'center',
        alignItems:'center'
    }
});
